<script lang='ts' setup>
import { reactive, ref, watch, nextTick } from 'vue'
import OrgMicroServiceList from './org-micro-service-list.vue'

const OrgMicroServiceListRef = ref();

const emit = defineEmits<{
    (e: 'update:visible', val: boolean): void,
    (e: 'ok', seleteData: Array<any>): void,
}>()

const props = defineProps({
    //是否显示
    visible: {
        type: Boolean,
        default: false
    },
})

//设置是否显示双向绑定
const visibleModelValue = ref(props.visible)
watch(() => props.visible, val => {
    visibleModelValue.value = val;
})
watch(visibleModelValue, val => {
    emit("update:visible", val)
    if (val) {
        nextTick(() => {
            console.log(OrgMicroServiceListRef.value)
            OrgMicroServiceListRef.value.getOrgMicroServiceTableRef().loadTable()
        })
    }
})

const OrgMicroServiceSelectDialogState = reactive({
    handleClose: () => {
        visibleModelValue.value = false;
    },
    //触发表单确定按钮，返回所选元素
    onOkButtonClick: () => {
        emit("ok", OrgMicroServiceListRef.value.getTableSelectionData())
    },
})

</script>
<template>
    <el-dialog
        v-model="visibleModelValue"
        title="选择微服务"
        width="60%"
        top="5vh"
        destroy-on-close
        :before-close="OrgMicroServiceSelectDialogState.handleClose"
    >
        <org-micro-service-list ref="OrgMicroServiceListRef" fit="auto"></org-micro-service-list>
        <template #footer>
            <jxtech-cancel-button @click="OrgMicroServiceSelectDialogState.handleClose"></jxtech-cancel-button>
            <jxtech-ok-button @click="OrgMicroServiceSelectDialogState.onOkButtonClick"></jxtech-ok-button>
        </template>
    </el-dialog>
</template>